<template>
  <div class="option">
    <div class="usermsg">
      <img :src="userInfo.avatar" alt="" />
      <div>
        <h3>{{ userInfo.nickname }}</h3>
        <p>id:{{ userInfo.uid }}</p>
      </div>
      <van-icon name="arrow" />
    </div>
    <ul class="myList">
      <li v-for="item in myList" :key="item.id">
        <router-link :to="item.url">
          <p>{{ item.name }}</p>
          <van-icon name="arrow" />
        </router-link>
      </li>
      <van-button color="red" size="large" plain @click="quituser"
        >退出登录</van-button
      >
    </ul>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  name: "myOption",
  data() {
    return {
      myList: [
        { id: 1, url: "/address", name: "我的收货地址" },
        { id: 2, url: "/", name: "账户与安全" },
        { id: 3, url: "/", name: "支付" },
        { id: 4, url: "/", name: "消息通知" },
        { id: 5, url: "/", name: "主题换肤" },
        { id: 6, url: "/", name: "隐私" },
        { id: 7, url: "/", name: "通用" },
        { id: 9, url: "/", name: "帮助与反馈" },
        { id: 10, url: "/", name: "关于淘宝" },
        { id: 11, url: "/", name: "模式切换" },
        { id: 13, url: "/", name: "商家入驻" },
      ],
      userInfo: null,
    };
  },
  methods: {
    quituser() {
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      Toast({
          message: "退出成功",
          icon: "success",
        });
      setTimeout(() => {
        this.$router.push("/login")
      }, 1000);
    },
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.userInfo = userInfo.data.data;
    console.log(this.userInfo);
  },
};
</script>
<style lang="scss" scoped>
.option {
  background-color: #f4f4f4;
  height: 100vh;
  .usermsg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    img {
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 5px;
    }

    h3 {
      font-size: 20px;
    }
    p {
      font-size: 16px;
    }
    > div {
      margin-left: -200px;
    }
  }
  .myList {
    li {
      line-height: 35px;
      background-color: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      a {
        // display: block;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
      }
      &:nth-child(1),
      &:nth-child(3),
      &:nth-child(7),
      &:nth-child(9) {
        margin-bottom: 10px;
      }
    }
    .van-button {
      margin-top: 10px;
    }
  }
}
.van-icon {
  font-size: 14px;
}
</style>